﻿
<div sustainalytics-pager-scroll
     pager-scroll-skip="esgRpInd.indicatorsSkip"
     pager-scroll-take="esgRpInd.indicatorsTake"
     pager-scroll-forwindow="true"
     pager-scroll-reset="esgRpInd.resetScrollPager"
     pager-scroll-locked="esgRpInd.scrollPagerLocked">

    <div class="tabs-users-2">
        <ul>
            <li id="ribbon_{{$index}}" class="tabs-users-2-25" ng-repeat="indCluster in esgRpInd.indicatorClusters">
                <a href="" ng-click="esgRpInd.selectIndicatorCluster(indCluster)" ng-class="{ active: indCluster.id == esgRpInd.selectedIndicatorCluster.id }">{{ indCluster.name }}</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div><br />

    <div ng-show="esgRpInd.indicators.length == 0">
        There are no such indicators
    </div>
    <div ng-repeat="ind in esgRpInd.indicators">
        <div class="left-content">
            <div class="title-18-bold">{{ ind.name }}</div>
            <div class="sidebar-table-left no-border">
                <div class="green-number-bubble">
                    {{ ind.score.rawScore | number:0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="table-3" style="margin-top: 9px;">
                    <div class="table-row-3">
                        <div class="table-cell-3 width_130_2">Raw Score</div>
                        <div class="table-cell-3">{{ ind.score.rawScore | number:0 }}</div>
                    </div>
                    <div class="table-row-3">
                        <div class="table-cell-3 width_130_2">Weight:</div>
                        <div class="table-cell-3">x {{ ind.score.weight * 100 | number:2 }} %</div>
                    </div>
                    <div class="table-row">
                        <div style="padding: 0 0; position: relative;" class="table-cell-3 border width_130_2">
                            Weighted Score:
                            <div class="trend-arow trend-arow-{{ ind.score.trendType }}">&nbsp;</div>
                        </div>
                        <div style="padding: 0 0;" class="table-cell-3 border ">{{ ind.score.weightedScore | number:2 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-content">
            <div>

                <!-- Answear Category -->
                <div style="font-weight: bold; margin-bottom: 5px;" ng-if="!(ind.isControversyIndicator && ind.controversy && ind.controversy.controversyLevel > 0)">{{ ind.answerCategoryDescription }}</div>

                <!-- Commentaries -->
                <p ng-if="ind.commentary && ind.commentary.length > 0" ng-repeat="comm in ind.commentary" ng-bind-html="comm"></p>

                <!-- Ticboxes -->
                <div class="report_ind_label" ng-if="ind.ticboxes && ind.ticboxes.length > 0" ng-repeat="ticbox in ind.ticboxes">
                    <input type="checkbox" id="ind_{{ $index }}" disabled="disabled" ng-checked="ticbox.checked" style="float: left; width: 15px;">
                    <label for="ind_{{ $index }}" style="float: left; width: 95%;">{{ ticbox.description }}</label>
                </div>

                <!-- Data Table -->
                <table ng-if="ind.dataTable && ind.dataTable.length > 0">
                    <tr>
                        <td style="padding-right: 10px;">&nbsp;</td>
                        <td style="padding-right: 10px;" ng-repeat="year in ind.dataTableYears">{{ year }}</td>
                    </tr>
                    <tr ng-repeat="nonRatedInd in ind.dataTableByName">
                        <td style="padding-right: 10px;">{{ nonRatedInd.name }}</td>
                        <td style="padding-right: 10px;" ng-repeat="nonRatedIndValue in nonRatedInd.indicatorsByYear">{{ nonRatedIndValue.value | number:2 }}</td>
                    </tr>
                </table>
            </div>
            
         

            <!-- Controversy -->
            <div ng-if="ind.isControversyIndicator && ind.controversy && ind.controversy.controversyLevel > 0">
                <div style="float: left; width: 300px; margin-top: 22px;">
                    <div class="sidebar-table-left no-border">
                        <div class="orange-number-bubble border3 ng-binding">
                            {{ ind.controversy.controversyLevel }}
                        </div>
                    </div>
                    <div class="sidebar-table-right no-border">
                        <div class="title-black-border">Category {{ ind.controversy.controversyLevel }} - {{ ind.controversy.controversyLevelName }}</div>
                        <div class="table-3" style="margin-top: 9px;">
                            <div class="table-row-3" ng-repeat="evInd in ind.controversy.eventIndicators">
                                <div class="table-cell-3 width_130_2 no-border" style="font-weight: normal;">{{ evInd.name }}</div>
                                <!--<div class="table-cell-3 no-border" style="text-align: right; font-weight: normal;">pg. 25</div>-->
                            </div>
                        </div>
                    </div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div style="float: left; width: 300px; margin-top: 22px;">
                    <div class="sidebar-table-left no-border">
                        <div class="trend-arow-large trend-arow-{{ ind.controversy.outlookType }}">&nbsp;</div>
                    </div>
                    <div class="sidebar-table-right no-border">
                        <div class="title-black-border">
                            Outlook
                        </div>
                        <ul class="esg-ratings_black">
                            <li>{{ ind.controversy.outlookTypeName }}</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="clear">&nbsp;</div>
        <div class="border-spacer"></div>
    </div>

</div>